/*
* 阔地教育科技有限公司版权所有（codyy.com/codyy.cn）.
* Copyright (c) 2019, Codyy and/or its affiliates. All rights reserved.
* @Date: 2020.01.02 00:31.
* @Author
* @Description 品牌 - 组建
**/
<template>
    <div>
        <el-tabs @tab-click="handleTabClick" v-model="activeName" >
          <!-- <el-tab-pane :label="item.title" :name="item.id" :tab-id="item.id">
           
            <div class="h-over">
                    <figure-write :figureData="item" :key="item.id" ></figure-write>
                </div>
                <el-pagination :current-page.sync="pagination1.pageNum" :hide-on-single-page="true" :page-size="pagination1.pageSize" :total="pagination1.total"
                               @current-change="handleCurrentChange1"
                               background layout="prev, pager, next"></el-pagination>
          </el-tab-pane> -->
            <!-- 企业资讯 -->
            <el-tab-pane label="企业资讯" name="first">
                <div class="h-over">
                    <figure-write :figureData="item" :key="item.id" v-for="item in enterpriseList"></figure-write>
                </div>
                <el-pagination :current-page.sync="pagination1.pageNum" :hide-on-single-page="true" :page-size="pagination1.pageSize" :total="pagination1.total"
                               @current-change="handleCurrentChange1"
                               background layout="prev, pager, next"></el-pagination>
            </el-tab-pane>
            <!-- 最新活动 -->
            <el-tab-pane label="最新活动" name="second">
                <div class="h-over">
                    <figure-write :figureData="item" :key="item.id" v-for="item in latestList"></figure-write>
                </div>
                <el-pagination :current-page.sync="pagination2.pageNum" :hide-on-single-page="true" :page-size="pagination2.pageSize" :total="pagination2.total"
                               @current-change="handleCurrentChange2"
                               background layout="prev, pager, next"></el-pagination>
            </el-tab-pane>
            <!-- 时尚资讯 -->
            <el-tab-pane label="时尚资讯" name="third">
                <div class="h-over">
                    <figure-write :figureData="item" :key="item.id" v-for="item in fashionList"></figure-write>
                </div>
                <el-pagination :current-page.sync="pagination3.pageNum" :hide-on-single-page="true" :page-size="pagination3.pageSize" :total="pagination3.total"
                               @current-change="handleCurrentChange3"
                               background layout="prev, pager, next"></el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { typeListData,enterpriseData, latestData, fashionData } from '@/api' // 企业资讯、最新活动、时尚资讯
// import { brandList } from '@/mock' // 导航数据
import FigureWrite from '@/components/FigureWrite'

export default {
  name: 'NavBar',
  components: { FigureWrite },
  data () {
    return {
      typelist:[],
      latestList: [], // 最新活动
      fashionList: [], // 时尚资讯
      enterpriseList: [], // 企业资讯
      activeName: 'first',
      pagination1: {
        total: 0,
        pageNum: 1, // 当前页
        pageSize: 9, // 每页条数
      },
      pagination2: {
        total: 0,
        pageNum: 1, // 当前页
        pageSize: 9, // 每页条数
      },
      pagination3: {
        total: 0,
        pageNum: 1, // 当前页
        pageSize: 9, // 每页条数
      }
    }
  },
  created () {
    // this.getTypeListData()
    this.getEnterpriseData() // 企业资讯
    this.getLatestData() // 最新活动
    this.getFashionData() // 时尚资讯
  },
  mounted () {
    // this.getTypeListData()
    // this.enterpriseList = brandList.result.list
    // this.latestList = brandList.result.list
    // this.fashionList = brandList.result.list
    this.getEnterpriseData() // 企业资讯
    this.getLatestData() // 最新活动
    this.getFashionData() // 时尚资讯
  },
  methods: {
    getTypeListData(){
      typeListData().then(res => {
        this.typelist = res
      })
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getEnterpriseData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        t: '1QYZX'
      }
      enterpriseData({ ...params, ...this.pagination1 }).then(res => {
        this.enterpriseList = res.list
        this.pagination1.total = res.total
      })
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getLatestData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        t: '2ZXHD'
      }
      latestData({ ...params, ...this.pagination2 }).then(res => {
        this.latestList = res.list
        this.pagination2.total = res.total
      })
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getFashionData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        t: '3SSZX'
      }
      fashionData({ ...params, ...this.pagination3 }).then(res => {
        this.fashionList = res.list
        this.pagination3.total = res.total
      })
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    handleTabClick (tab, event) {
      console.log(tab, event)
    },
    /**
     *@Description
     *@Param
     *@Return 分页.
     **/
    handleCurrentChange1 (val) {
      this.pagination1.pageNum = val
      this.getEnterpriseData()
    },
    handleCurrentChange2 (val) {
      this.pagination2.pageNum = val
      this.getLatestData()
    },
    handleCurrentChange3 (val) {
      this.pagination3.pageNum = val
      this.getFashionData()
    },

  }
}
</script>

<style lang="scss" scoped>
    .h-over {
        overflow: hidden;
    }
    .el-pagination {
        padding: 20px 0;
        text-align: center;
    }
</style>
